<template>
  <div class="category">
    <CheckPicker ref="child" />
    <div class="tips-bar flex_" v-if="self.task">
      <div class="text-info">
        共有0条筛选结果
      </div>
      <div class="clear" @click="clearVal">清除搜索</div>
    </div>
    <div class="blog-item" v-for="item in self.dataList" :key="item._id" @click="toAreicle(item)">
      <div class="item-header">
        <div class="item-date">2022/06/05</div>
        <div class="item-group">{{ item.sort }}</div>
      </div>
      <div class="item-body">
        <div class="item-title"> {{ item.title }}</div>
        <div v-if="!item.isLocal" class="is-out" @click="openOutUrl(item.link)">
          <ExportOutlined/>
        </div>
      </div>
      <div class="item-footer">
        <div v-if="item.isLocal" class="type type_recommend">原创</div>
        <div v-else class="type type_original">外链</div>
        <span><EyeOutlined/>  {{ item.viewCount }} </span>
        <span><CommentOutlined/> {{ item.commentsFlag }} </span>
      </div>
    </div>
    <div class="empty" v-if="self.dataList.length == 0">
      <a-empty description="暂无内容" @click="getDataList"/>
      <a-divider dashed="dashed"/>
    </div>
    <div class="tips-loading flex_" v-if="self.loading">
      <LoadingOutlined/>
      加载中
    </div>
  </div>
</template>

<script setup>
import CheckPicker from '../common/cheack-picker-options.vue'
import {queryArticle} from '@/utils/api'
import {ref ,reactive, onMounted,watch } from "vue";
import {useRouter} from "vue-router";
import {message} from "ant-design-vue";
let router = useRouter()
//监听路由变化
watch(() =>router.currentRoute.value.path,(newValue,oldValue)=> {
  if (newValue){
    changeTag()
  }
})

const self = reactive({
  date:'',
  dataList: [],
  timer: null,
  delay: false,
  task: false,
  loading: false,
  total: 0,
  pageNo: 1,
  pageSize: 15,
})
//标签发生变化
const changeTag = () => {
  self.delay = false
  clearTimeout(self.timer)
  self.pageNo = 0
  getDataList()
}
//获取列表
const getDataList = () => {
  let ags = throttle()
  if (ags) {
    // get self
    self.dataList = []
    self.loading = true
    self.pageNo += 1
    self.timer = setTimeout(() => {
      let name = router.currentRoute.value.name
      self.loading = false
      queryArticle({sort:name}).then(res=>{
        self.dataList = res.data
      })
    }, 1500)
  }
}
//文章详情
const toAreicle = (item)=> {
  if (item.isLocal) {
    router.push({path: '/blog/article', query: {id: item.id}})
  }

}
//打开外链
const openOutUrl = (url) =>{
  if (url){
    window.open(url)
  }else {
    message.error('链接可能丢失啦~')
  }

}
//节流
const throttle = ()=> {
  if (self.delay) {
    return false;
  } else {
    self.delay = true
    setTimeout(() => {
      self.delay = false
      self.timer = null
    }, 5000)
    return true;
  }

}
//清除搜索
const child = ref()
const clearVal = ()=> {
 child.value.clearVal()
}

onMounted(()=>{
  changeTag()
})

</script>

<style scoped lang="less">
.flex_ {
  display: flex;
  justify-content: center;
  align-items: center;
}
.category{
  width: 100%;
}

.tips-bar {
  height: 45px;
  border-radius: 5px;
  margin: 15px;
  padding: 0 15px;
  border: @--border-primary;
  background-color: @--background-primary;
  justify-content: space-between;

  .text-info {
    color: @--secondary;
  }
  .clear {
    color: @--color-primary;
    cursor: pointer;
  }
}

.empty{
  margin: 10px 0;
}

.tips-loading {
  width: 100%;
  height: 50px;
  border: 1px #dadada dashed;
}


.blog-item {
  width: 100%;
  height: 140px;
  padding: 10px;
  border-bottom: 1px #eee dashed;
  cursor: pointer;

  &:hover {
    background-color: rgba(248, 248, 248, 0.99);
  }

  .item-header {
    height: 30px;
    font-size: 14px;
    display: flex;
    align-items: center;

    .item-date {
      width: 80px;
      color: #4e5969;
      margin-right: 10px;
      border-right: 1px #eee solid;
    }

    .item-group {
      color: #86909c;

      &:hover {
        color: #007fff;
      }
    }
  }

  .item-body {
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 30px;
    margin: 15px 0;
    color: #1d2129;
    position: relative;

    .is-out {
      position: absolute;
      right: 15px;
      top: 0;
      font-size: 24px;

      &:hover {
        transform: scale(1.2);
      }
    }
  }

  .item-footer {
    display: flex;
    font-size: 14px;
    color: #86909c;

    span {
      margin-right: 10px;
    }

    .type {
      width: 40px;
      height: 20px;
      border-radius: 1px;
      font-size: 12px;
      margin-right: 10px;
      text-align: center;
      line-height: 20px;
    }

    .type_recommend {
      background-color: rgba(222, 104, 46, 0.12);
      color: #DE682E;
    }

    .type_original {
      background-color: rgba(93, 175, 133, 0.12);
      color: #5DAF85;
    }
  }
}


</style>